<template>
  <div class="jmjkdafm" v-loading="isLoading">
    <p>创建时间：{{ info.fillDate | fillDate }}</p>
    <p style="float: right; margin-top: -20px" v-if="false">
      <el-button
        size="small"
        style="background-color: #fff; color: rgb(0, 146, 254)"
        type="primary"
        plain
        >修改</el-button
      >
      <el-button
        size="small"
        style="background-color: #fff; color: rgb(0, 146, 254)"
        type="primary"
        plain
        >预览</el-button
      >
      <el-button
        size="small"
        style="background-color: #fff; color: rgb(0, 146, 254)"
        type="primary"
        plain
        >下载</el-button
      >
    </p>
    <p>最近更新时间：---</p>
    <table class="tab_sty" cellspacing="0" style="width: 100%">
      <tr>
        <th>档案编号</th>
        <td style="width: 85%">
          <span v-if="!!info.residentInfoCode">
            <span
              v-for="(item, index) in info.residentInfoCode"
              :key="index"
              :class="item == '-' ? 'no_bd' : 'yes_bd'"
              >{{ item }}</span
            >
          </span>
          <span v-else>-</span>
        </td>
      </tr>
    </table>
    <p style="text-align: center; margin-top: 15px">
      <span style="font-weight: 700; font-size: 28px; color: #000"
        >居民健康档案</span
      >
    </p>
    <table class="tab_sty" cellspacing="0" style="width: 100%">
      <tr>
        <th>姓名</th>
        <td>{{ info.residentName }}</td>
        <th>联系电话</th>
        <td>{{ info.telephone }}</td>
        <th>现住址</th>
        <td style="width: 85%">{{ info.nowAddress }}</td>
        <th>户籍地址</th>
        <td style="width: 85%">{{ info.permanentAddress }}</td>
        <th>工作单位</th>
        <td style="width: 85%">{{ info.workUnit }}</td>
      </tr>
      <tr style="margin-top: 30px; display: inline-block; width: 100%">
        <th>建档单位</th>
        <td>{{ info.createUnitName }}</td>
        <th>建档人</th>
        <td>{{ info.createUserName }}</td>
        <th>责任医生</th>
        <td>{{ info.dutyUserName }}</td>
        <th>建档日期</th>
        <td>{{ info.fillDate | time }}</td>
        <th>档案编号</th>
        <td>{{ info.residentInfoCode ? info.residentInfoCode : "-" }}</td>
        <th>旧档案号</th>
        <td>{{ info.residentInfoCodeOld }}</td>
      </tr>
    </table>
    <p style="margin-top: 30px">
      旧档案号指：已在管理的纸质档案上的标准档案编号或曾使用的公卫系统里生成的标准档案编号，如果有请填入，查看随访表或打印纸质版时将以旧档案号为准；如果没有旧档案号可不填，将自动生成符合国家公卫规定的新档案编号。
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
      档案号: "530721-205-105-00293",
      isLoading: false,
    };
  },
  mounted() {
    this.getdata();
  },
  filters: {
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times = d.getFullYear() + "-" + month + "-" + day;
        return times;
      }
    },
  },
  methods: {
    getdata() {
      this.isLoading = true;
      var data = {
        idNo: localStorage.getItem("idCard"),
      };
      this.$post("/resident/list?idNo=" + data.idNo).then((res) => {
        this.info = res.data[0];
        this.isLoading = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.jmjkdafm {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
  .tab_sty {
    border-collapse: collapse;
    th {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 15%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      background-color: #fafafa;
      border: 1px solid rgb(217, 217, 217);
    }
    td {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      width: 35%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      border: 1px solid rgb(217, 217, 217);
      text-align: left;
    }
    .no_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
    }
    .yes_bd {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 3px;
      border: 1px solid #000;
    }
  }
  .no_bdb {
    td {
      border-bottom: none;
    }
  }
}
</style>